{% extends "../main.html" %}

{% block head %}
<script src="/javascript/jquery.elastic.js" type="text/javascript"></script>
<script src="http://datejs.googlecode.com/svn/tags/Alpha1.0/build/date-et-EE.js" type="text/javascript"></script>
<script src="/javascript/jquery.autocomplete-min.js" type="text/javascript"></script>
{% endblock %}

{% block breadcrumb %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li>{{ bubble.displayname }}</li>
    </ul>
</nav>
{% endblock %}

{% block content %}

<div id="content">
                {% if bubble.in_bubbles %}
                {% for ib in bubble.in_bubbles|dictsort:"displayname" %}
                    <a href="/bubble/{{ ib.key.id }}" style="display:block;">« {{ ib.type2.displayname }} {{ ib.displayname }}</a>
                {% endfor %}
                {% endif %}

    <h1 style="text-align:center;">{{ bubble.type2.displayname }}</h1>
    <div class="vertical_table">
        <div class="table_row">
            <div class="table_cell" style="width:300px; vertical-align:top;">

                <label for="name" style="display:block;">{{ str.bubble_name }}:</label>
                <input type="text" id="name" name="name" class="autosave" value="{{ bubble.name.translate|default:""|escape }}" maxlength="500" style="display:block; width:99%; margin-bottom:15px;" />

                <label for="description" style="display:block;">{{ str.bubble_description }}:</label>
                <textarea id="description" name="description" class="autosave" style="display:block; width:99%; margin-bottom:15px;">{{ bubble.description.translate|default:""|escape }}</textarea>

                <label for="url" style="display:block;">{{ str.bubble_url }}:</label>
                <input type="text" id="url" name="url" class="autosave" value="{{ bubble.url|default:""|escape }}" maxlength="500" style="display:block; width:99%; margin-bottom:15px;" />

                <label for="start_datetime" style="display:block;">{{ str.bubble_period }}:</label>
                <input type="text" id="start_datetime" name="start_datetime" class="autosave_date" value="{{ bubble.start_datetime|date:"d.m.Y H:i" }}" maxlength="500" style="width:110px; margin-bottom:15px;" /> - <input type="text" id="end_datetime" name="end_datetime" class="autosave_date" value="{{ bubble.end_datetime|date:"d.m.Y H:i" }}" maxlength="500" style="width:110px; margin-bottom:15px;" />

                <label for="badge" style="display:block;">{{ str.bubble_ratingscale }}:</label>
                <select id="rating_scale" name="rating_scale" class="autosave" style="margin-bottom:15px;">
                    <option value=""></option>
                    {% for r in ratingscales|dictsort:"displayname" %}
                    <option value="{{ r.key }}" {% ifequal bubble.rating_scale.key r.key %} selected{% endifequal %}>{{ r.displayname }}</option>
                    {% endfor %}
                </select>

                <label for="badge" style="display:block;">{{ str.bubble_badge }}:</label>
                <input type="text" id="badge" name="badge" class="autosave" value="{{ bubble.badge.translate|default:"" }}" maxlength="500" style="display:block; width:99%; margin-bottom:15px;" />

                <label style="display:block;">{{ str.bubble_seeders }}:</label>
                <div id="seeders" style="margin-bottom:5px;">
                    {% if bubble.seeders2 %}
                    {% for p in bubble.seeders2|dictsort:"displayname" %}
                        <a href="javascript:void(0);" person="{{ p.key }}" type="seeder" class="deletable">{{ p.displayname|default:"" }}</a>{% if forloop.last %}{% else %}, {% endif %}
                    {% endfor %}
                    {% endif %}
                </div>
                <input type="text" id="seeder" name="seeder" maxlength="500" style="display:block; width:99%; margin-bottom:15px;" />

                <label style="display:block;">{{ str.bubble_leechers }}:</label>
                <div id="leechers" style="margin-bottom:5px;">
                    {% if bubble.leechers2 %}
                    {% for p in bubble.leechers2|dictsort:"displayname" %}
                        <a href="javascript:void(0);" person="{{ p.key }}" type="leecher" class="deletable">{{ p.displayname|default:"" }}</a>{% if forloop.last %}{% else %}, {% endif %}
                    {% endfor %}
                    {% endif %}
                </div>
                <input type="text" id="leecher" name="leecher" maxlength="500" style="display:block; width:99%; margin-bottom:15px;" />

                <div style=" margin-top:30px;">
                    {% if nextinline_bubbles %}
                    <select id="nextinline" name="nextinline" class="autosave" style="margin-bottom:15px; width:300px; display:block;">
                        <option value="">nextinline</option>
                        {% regroup nextinline_bubbles|dictsort:"type" by type2.displayname as nextinlines %}
                        {% for nextinline in nextinlines %}
                        <optgroup label="{{ nextinline.grouper }}">
                            {% for add in nextinline.list|dictsort:"displayname" %}
                            <option value="{{ add.key }}"{% ifequal bubble.next_in_line.0 add.key %} selected{% endifequal %}>{{ add.displayname }}</option>
                            {% endfor %}
                        </optgroup>
                        {% endfor %}
                    </select>
                    {% endif %}

                    {% if addable_bubbles %}
                    <select id="add_existing" name="add_existing" style="margin-bottom:15px; width:300px; display:block;">
                        <option value="">{{ str.bubble_add_existing }}</option>
                        {% regroup addable_bubbles|dictsort:"type" by type2.displayname as addable %}
                        {% for addable in addable %}
                        <optgroup label="{{ addable.grouper }}">
                            {% for add in addable.list|dictsort:"displayname" %}
                            <option value="{{ add.key }}">{{ add.displayname }}</option>
                            {% endfor %}
                        </optgroup>
                        {% endfor %}
                    </select>
                    {% endif %}

                    {% if bubble.type2.allowed_subtypes2 %}
                    {% for at in bubble.type2.allowed_subtypes2|dictsort:"displayname" %}
                        <a href="/bubble/add/{{ at.type }}/{{ bubble.key }}" class="button" style="margin-bottom:15px; width:300px; display:block;">{{ str.add_new }} {{ at.displayname|default:"" }}</a>
                    {% endfor %}
                    {% endif %}

                    {% if bubble.rating_scale %}
                        <a href="/rating/{{ bubble.key.id }}" class="button" style="margin-bottom:15px; width:300px; display:block;">{{ str.bubble_rating }}</a>
                    {% endif %}
                    {% if bubble.bubbles %}
                    {% else %}
                        <a href="javascript:void(0);" id="delete" style="margin-bottom:15px; color:red; width:300px; display:block;">{{ str.bubble_delete }} {{ bubble.type2.displayname|lower }}</a>
                    {% endif %}
                </div>

                <div style="border:gray 1px solid; padding:10px;">
                <label for="start_datetime" style="display:block;">LOO AJASLOTID:</label>
                <input type="text" id="timeslot_start" name="timeslot_start" class="timeslot" value="{{ bubble.start_datetime|date:"d.m.Y H:i" }}" maxlength="500" style="width:110px; margin-bottom:15px;" /> - <input type="text" id="timeslot_end" name="timeslot_end" class="timeslot" value="{{ bubble.end_datetime|date:"d.m.Y H:i" }}" maxlength="500" style="width:110px; margin-bottom:15px;" /><br />
                Intervall <input type="text" id="timeslot_interval" name="timeslot_interval" value="" maxlength="500" style="width:40px; margin-bottom:15px;" /> minutit<br />
                <a href="javascript:void(0);" id="timeslot_generate" class="button" style="margin-bottom:15px; width:110px; display:block;">Loo ajaslotid</a>
                </div>


            </div>
            <div class="table_cell" style="vertical-align:top; padding-top:10px;">

                {% if bubble.bubbles %}
                <div class="table" style="margin-bottom:10px; font-size:11px;">
                    <div class="table_row" style="padding-top:20px;">
                        <div class="header_cell" style="text-align:left;">
                        </div>
                        <div class="header_cell" style="text-align:left;">
                            {{ str.bubble_name }}
                        </div>
                        <div class="header_cell" style="text-align:center;">
                            {{ str.bubble_period }}
                        </div>
                        <div class="header_cell" style="text-align:center;">
                            {{ str.bubble_leechers }}
                        </div>
                        <div class="header_cell" style="text-align:center;">
                            {{ str.bubbles }}
                        </div>
                    </div>
                    {% for b in bubble.bubbles|dictsort:"start_datetime" %}
                    <div class="table_row infiniterow" bubble="{{ b.key }}">
                        <div class="table_cell" style="text-align:right;">
                            {{ forloop.counter }}.
                        </div>
                        <div class="table_cell">
                            {{ b.type2.displayname }}: <a href="/bubble/{{ b.key.id }}">{{ b.displayname }}</a>
                        </div>
                        <div class="table_cell" style="white-space:nowrap;">
                            {{ b.displaydate }}
                        </div>
                        <div class="table_cell" style="text-align:center;">
                            {{ b.leechers|length }}
                        </div>
                        <div class="table_cell" style="text-align:center;">
                            {{ b.optional_bubbles|length }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

            </div>
        </div>

    </div>
    <span style="display:block; text-align:center; font-size:11px;">{{ changed }}</span>

</div>

<script type="text/javascript">
    $(document).ready(function(){

        if(!$('#name').val()) {
            $('#name').focus();
        }

        $('textarea').elastic();

        $('.autosave_date').change(function() {
            dinput = $(this);
            dvalue = Date.parse(dinput.val());
            if(dvalue) {
                dinput.val(dvalue.toString('dd.MM.yyyy HH:mm'));
            } else {
                dinput.val('');
            }
            autoSave(dinput, {});
        });

        $('.autosave').change(function() {
            autoSave($(this), {});
        });

        function autoSave(input, data) {
            if(!data['field']) data['field'] = input.attr('name');
            if(!data['value']) data['value'] = input.val();

            $.post('/bubble/{{ bubble.key }}', data, function(json) {
                input.effect("highlight", {}, 1000);
            }, "json");
        }

        $('#add_existing').change(function() {
            $.post('/bubble/add_existing/{{ bubble.key }}', { key: $(this).val() }, function(json) {
                window.location.href = '';
            }, "json");
        });

        $('#delete').click(function() {
            if (confirm('{{ str.bubble_delete_confirm }} {{ bubble.type2.displayname|lower }}?')) location.href = '/bubble/delete/{{ bubble.key }}';
        });


        $('.deletable').click(function() {
            if (confirm('{{ str.bubble_delete_person }}?')) do_person($(this).attr('person'), 'delete', $(this).attr('type'));
        });


        $('.timeslot').change(function() {
            dinput = $(this);
            dvalue = Date.parse(dinput.val());
            if(dvalue) {
                dinput.val(dvalue.toString('dd.MM.yyyy HH:mm'));
            } else {
                dinput.val('');
            }
        });

        $('#timeslot_generate').click(function() {
            $.post('/bubble/add_timeslot/{{ bubble.key }}', { start: $('#timeslot_start').val(),  end: $('#timeslot_end').val(),  interval: $('#timeslot_interval').val() }, function(json) {
                window.location.href = '';
            }, "json");
        });


        var se = $('#seeder').autocomplete({
            serviceUrl: '/bubble/seeders',
            onSelect: function(value, data){
                do_person(data, 'add', 'seeder');
            },
        });

        var le = $('#leecher').autocomplete({
            serviceUrl: '/bubble/seeders',
            onSelect: function(value, data){
                do_person(data, 'add', 'leecher');
            },
        });

        function do_person(person, action, type) {
            $.get('/bubble/' + type + '/' + action + '/{{ bubble.key }}/' + person, function(json) {
                linksarray = Array();
                $('#' + type).val('');
                for (var key in json) {
                    if (json.hasOwnProperty(key)) {
                        linksarray.push('<a href="javascript:void(0);" person="' + key + '" type="' + type + '" class="deletable">' + json[key] + '</a>');
                    }
                }
                $('#' + type + 's').html(linksarray.join(', '));
            }, 'json');
        };



    });
</script>

{% endblock %}